<template>
    <el-tabs value="add" type="card">
        <el-tab-pane label="新增临时素材" name="add">
            <Form
                    ref="addForm"
                    :form-items="addFormItems"
                    v-on:submitData="addFormSubmitData"
            ></Form>
            <div v-if="addSuccessData.type">
                <el-form>
                    <el-form-item label="媒体类型">
                        {{addSuccessData.type}}
                    </el-form-item>
                    <el-form-item label="媒体id">
                        {{addSuccessData.mediaId}}
                    </el-form-item>
                    <el-form-item label="上传时间">
                        {{addSuccessData.createdAt}}
                    </el-form-item>
                </el-form>
            </div>
        </el-tab-pane>
        <el-tab-pane label="获取临时素材" name="get">
            <Form
                    ref="getForm"
                    :form-items="getFormItems"
            ></Form>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
    import Form from '../../../../../../common-util/src/components/page/Form.vue'

    let mediaType = [
        {
            id: 'image',
            name: '图片'
        },
        {
            id: 'voice',
            name: '语音'
        },

        {
            id: 'video',
            name: '视频'
        },
        {
            id: 'thumb',
            name: '缩略图'
        },
    ]
    export default {
        components:{
            Form
        },
        name: "TemporaryMaterial",
        data(){
            return {
                // 上传成功后的数据
                addSuccessData:{
                    type: null,
                    mediaId: null,
                    createdAt: null
                },
                addFormItems:[
                    {
                        field: {
                            name: 'appCode'
                        },
                        element:{
                            type: 'select',
                            select:{
                                url: this.$baseURL.wx + '/wx/mp/config/list',
                                optionProp:{
                                    value: 'appCode',
                                    label: 'appName'
                                }
                            },
                            required: true,
                            label: '公众号',
                        }
                    },
                    {
                        field: {
                            name: 'type'
                        },
                        element:{
                            type: 'selectLocal',
                            selectLocal: {
                                data: mediaType
                            },
                            required: true,
                            label: '媒体文件类型',
                        }
                    },
                    {
                        field: {
                            name: 'file'
                        },
                        element:{
                            type: 'upload',

                            upload:{
                                type: 'upload',
                                limit: 1,
                                showFileList: true,
                                listType: 'text',
                                multiple: false,
                                autoUpload: false,
                            },
                            required: true,
                            tips: '图片（image）: 10M，支持PNG\\JPEG\\JPG\\GIF格式\n' +
                                '<br/>' +
                                '语音（voice）：2M，播放长度不超过60s，支持AMR\\MP3格式\n' +
                                '<br/>' +
                                '视频（video）：10MB，支持MP4格式\n' +
                                '<br/>' +
                                '缩略图（thumb）：64KB，支持JPG格式',
                            label: '媒体文件',
                        }
                    },
                    {
                        element:{
                            type: 'button',
                            button:[
                                {
                                    action: 'submit',
                                    requestMethod:'post',
                                    requestType: 'multipart',
                                    url: this.addUrl,
                                    label: '保存'
                                },
                                {
                                    action: 'reset',
                                    label: '重置',
                                    type: 'default'
                                }
                            ]
                        }
                    }
                ],
                getFormItems:[
                    {
                        field: {
                            name: 'appCode'
                        },
                        element:{
                            type: 'select',
                            select:{
                                url: this.$baseURL.wx + '/wx/mp/config/list',
                                optionProp:{
                                    value: 'appCode',
                                    label: 'appName'
                                }
                            },
                            required: true,
                            label: '公众号',
                        }
                    },
                    {
                        field: {
                            name: 'mediaId'
                        },
                        element:{
                            required: true,
                            label: '媒体id',
                        }
                    },
                    {
                        element:{
                            type: 'button',
                            button:[
                                {
                                    action: this.getMedia,
                                    label: '获取'
                                },
                                {
                                    action: 'reset',
                                    label: '重置',
                                    type: 'default'
                                }
                            ]
                        }
                    }
                ]
            }
        },
        methods:{
            addFormSubmitData (data){
                this.addSuccessData = data
            },
            addUrl(form) {
                if(!form.appCode || !form.type){
                    this.$message.error('请选择公众号和媒体类型')
                    return false
                }
                return this.$baseURL.wx + '/wx/mp/material/'+ form.appCode +'/create/media/' + form.type
            },
            getMedia(form) {
                this.$refs.getForm.validateAndSubmitForm((form)=>{
                    window.open(this.$baseURL.wx + '/wx/mp/material/'+ form.appCode +'/get/media/' + form.mediaId)
                })
            },
        }
    }
</script>

<style scoped>

</style>